<template>
  <axiom-bottom-sheet
    :visible="visible"
    @update:visible="$emit('update:visible', $event)"
  >
    <div class="axiom-date-range-sheet">
      <!-- Header -->
      <div class="header">
        <axiom-button
          size="small"
          type="primary"
          @click="handleClear"
          class="btn-clear"
        >
          清空
        </axiom-button>
        
        <axiom-title
          :title="title"
          type="component"
          level="3"
          class="sheet-title"
        />
        
        <axiom-button
          size="small"
          @click="$emit('update:visible', false)"
          class="btn-close"
        >
          <AxiomIcon name="Close" size="16" />
        </axiom-button>
      </div>
      
      <!-- Date Display -->
      <div class="date-display">
        <axiom-tab
          v-model="activeTab"
          :tabs="[
            { key: 'start', label: '开始时间' },
            { key: 'end', label: '结束时间' }
          ]"
        >
          <template #default="{ activeTab }">
            <div class="date-value">
              <axiom-text type="primary" weight="bold">
                {{ activeTab === 'start' ? formatDate(startYear, startMonth, startDay) : formatDate(endYear, endMonth, endDay) }}
              </axiom-text>
            </div>
          </template>
        </axiom-tab>
      </div>
      
      <!-- Date Picker (根据选中的Tab显示) -->
      <div class="date-section">
        <div class="wheel-picker">
          <div class="wheel-column">
            <div class="wheel-header">{{ activeTab === 'start' ? startYear : endYear }}年</div>
            <div class="wheel-scroll">
              <div 
                v-for="year in years" 
                :key="year"
                :class="['wheel-item', { active: year === (activeTab === 'start' ? startYear : endYear) }]"
                @click="handleYearSelect(year)"
              >
                {{ year }}年
              </div>
            </div>
          </div>
          
          <div class="wheel-column">
            <div class="wheel-header">{{ String(activeTab === 'start' ? startMonth : endMonth).padStart(2, '0') }}月</div>
            <div class="wheel-scroll">
              <div 
                v-for="month in months" 
                :key="month"
                :class="['wheel-item', { active: month === (activeTab === 'start' ? startMonth : endMonth) }]"
                @click="handleMonthSelect(month)"
              >
                {{ String(month).padStart(2, '0') }}月
              </div>
            </div>
          </div>
          
          <div class="wheel-column">
            <div class="wheel-header">{{ String(activeTab === 'start' ? startDay : endDay).padStart(2, '0') }}日</div>
            <div class="wheel-scroll">
              <div 
                v-for="day in getDaysInMonth(activeTab === 'start' ? startYear : endYear, activeTab === 'start' ? startMonth : endMonth)" 
                :key="day"
                :class="['wheel-item', { active: day === (activeTab === 'start' ? startDay : endDay) }]"
                @click="handleDaySelect(day)"
              >
                {{ String(day).padStart(2, '0') }}日
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Footer Buttons -->
      <div class="footer">
        <axiom-button
          @click="handleReset"
          size="large"
          class="reset-button"
        >
          重置
        </axiom-button>
        <axiom-button
          type="primary"
          size="large"
          @click="handleConfirm"
          class="confirm-button"
        >
          确定
        </axiom-button>
      </div>
    </div>
  </axiom-bottom-sheet>
</template>

<script>
import { ref, watch } from 'vue';
import AxiomBottomSheet from './AxiomBottomSheet.vue';
import AxiomButton from '../common/AxiomButton.vue';
import AxiomTitle from '../common/AxiomTitle.vue';
import AxiomText from '../common/AxiomText.vue';
import AxiomTab from '../common/AxiomTab.vue';
import AxiomIcon from '../common/AxiomIcon.vue';

export default {
  name: 'AxiomDateRangeSheet',
  components: {
    AxiomBottomSheet,
    AxiomButton,
    AxiomTitle,
    AxiomText,
    AxiomTab,
    AxiomIcon
  },
  props: {
    visible: Boolean,
    title: { type: String, default: '选择期间' },
    modelValue: [String, Array],
    minDate: String,
    maxDate: String
  },
  emits: ['update:visible', 'update:modelValue', 'confirm'],
  setup(props, { emit }) {
    const currentYear = new Date().getFullYear();
    const currentMonth = new Date().getMonth() + 1;
    const currentDay = new Date().getDate();
    
    const years = ref(Array.from({ length: 10 }, (_, i) => currentYear - 5 + i));
    const months = ref(Array.from({ length: 12 }, (_, i) => i + 1));
    
    const startYear = ref(currentYear);
    const startMonth = ref(currentMonth);
    const startDay = ref(currentDay);
    const endYear = ref(currentYear);
    const endMonth = ref(currentMonth);
    const endDay = ref(currentDay);
    
    const activeTab = ref('start');
    
    const initializeValues = () => {
      if (props.modelValue && Array.isArray(props.modelValue) && props.modelValue.length === 2) {
        const startDate = new Date(props.modelValue[0]);
        const endDate = new Date(props.modelValue[1]);
        if (!isNaN(startDate.getTime())) {
            startYear.value = startDate.getFullYear();
            startMonth.value = startDate.getMonth() + 1;
            startDay.value = startDate.getDate();
        }
        if (!isNaN(endDate.getTime())) {
            endYear.value = endDate.getFullYear();
            endMonth.value = endDate.getMonth() + 1;
            endDay.value = endDate.getDate();
        }
      }
    };
    watch(() => props.modelValue, initializeValues, { immediate: true });

    const getDaysInMonth = (year, month) => new Date(year, month, 0).getDate();
    const formatDate = (y, m, d) => `${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`;

    const handleConfirm = () => {
      let startDateStr = formatDate(startYear.value, startMonth.value, startDay.value);
      let endDateStr = formatDate(endYear.value, endMonth.value, endDay.value);
      if (new Date(startDateStr) > new Date(endDateStr)) {
          [startDateStr, endDateStr] = [endDateStr, startDateStr];
      }
      const result = [startDateStr, endDateStr];
      emit('update:modelValue', result);
      emit('confirm', result);
      emit('update:visible', false);
    };

    const handleClear = () => {
      emit('update:modelValue', []);
      emit('confirm', []);
    };
    
    const handleReset = () => {
        initializeValues();
    };

    const handleYearSelect = (year) => {
        if (activeTab.value === 'start') {
            startYear.value = year;
        } else {
            endYear.value = year;
        }
    };

    const handleMonthSelect = (month) => {
        if (activeTab.value === 'start') {
            startMonth.value = month;
        } else {
            endMonth.value = month;
        }
    };

    const handleDaySelect = (day) => {
        if (activeTab.value === 'start') {
            startDay.value = day;
        } else {
            endDay.value = day;
        }
    };

    return {
        years,
        months,
        startYear,
        startMonth,
        startDay,
        endYear,
        endMonth,
        endDay,
        activeTab,
        getDaysInMonth,
        formatDate,
        handleConfirm,
        handleClear,
        handleReset,
        handleYearSelect,
        handleMonthSelect,
        handleDaySelect,
    };
  }
};
</script>

<style lang="scss">
@use '../../styles/components/mobile/axiom-date-range-sheet';
</style> 